<template>
  <div>
    <div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="门店信息" name="first">
          <!-------------------------------------------- 门店信息 -->
          <el-card class="box-card" v-bind="dataObj">
            <div class="cardDiv" v-bind="dataObj">
              <div class="title">企业信息</div>
              <div class="content">
                <div>
                  <p>企业名称：</p>
                  <p>{{dataObj.name}}</p>
                </div>
                <div>
                  <p>注册地址</p>
                  <p>{{dataObj.location}}</p>
                </div>
                <div>
                  <p>经纬度</p>
                  <p>{{dataObj.longitude}}</p>
                </div>
                <div>
                  <p>企业简介</p>
                  <div class="introduceDiv">
                    <p class="textareaP">{{dataObj.des}}</p>
                  </div>
                </div>
                <!--  -->
                <div>
                  <p>客服电话</p>
                  <p>{{dataObj.serviceNumber}}</p>
                </div>
                <div>
                  <p>负责人姓名</p>
                  <p>{{dataObj.boss}}</p>
                </div>
                <div>
                  <p>负责人电话</p>
                  <p>{{dataObj.bossNumber}}</p>
                </div>
                <div>
                  <p>营业执照</p>
                  <p>
                    <img :src="addressHttp + dataObj.license" alt="">
                  </p>
                </div>
                <div>
                  <p>门头照片</p>
                  <p>
                    <img :src="addressHttp +dataObj.photo " class="imgLeft" alt="">
                    <!-- <img v-for="(i,index) in arrPhoto"
                         :key="index"
                         :src="addressHttp + arrPhoto[index]"
                         class="imgLeft"
                         alt=""> -->
                  </p>
                </div>
              </div>
            </div>
            <div class="cardDiv">
              <div class="title">收款信息</div>
              <div class="content">
                <div>
                  <p>银行开户公司名</p>
                  <p>{{dataObj.name}}</p>
                </div>
                <div>
                  <p>银行开户账号</p>
                  <p>{{dataObj.bankAccount}}</p>
                </div>
                <div>
                  <p>银行开户所在地</p>
                  <p>{{dataObj.bankLocation}}</p>
                </div>
                <div>
                  <p>开户银行</p>
                  <p>{{dataObj.bank}}</p>
                </div>
              </div>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="服务项目" name="second" class="project">
          <!---------------------------------------------------------------- 项目服务 -->
          <!-- 合计数据展示 -->
          <div class="totalTitle">
            <div>
              <p>近30日提供服务次数</p>
              <p>90次</p>
            </div>
            <div>
              <p>近30日赚取佣金</p>
              <p>￥11209.0</p>
            </div>
            <div>
              <p>提供服务项目数</p>
              <p>4</p>
            </div>
          </div>
          <hr>
          <div class="header">
            <p>服务项目</p>
            <div>
              <el-input placeholder="请输入项目名称查询" v-model="keyWord" clearable>
              </el-input>
              <el-button type="primary" class="searchBtn" @click="searchProject">查询</el-button>
            </div>
          </div>
          <!-- table -->

          <el-table :data="currentData" stripe style="width: 100%">
            <el-table-column prop="name" label="项目名称">
            </el-table-column>
            <el-table-column prop="price" label="项目价格(元)">
            </el-table-column>
            <el-table-column prop="time" label="项目时长">
              <template slot-scope="scope">
                {{ scope.row.time+'分钟'}}
              </template>
            </el-table-column>
            <el-table-column prop="state" label="服务状态">
              <template slot-scope="scope">
                <el-tag :type="scope.row.state === 0 ? 'success' : 'danger'">
                  {{scope.row.state === 0 ? "正常" : "屏蔽" }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="创建时间">
            </el-table-column>
            <el-table-column prop="state" label="操作" align="center">
              <template slot-scope="scope">
                <el-tag :type="scope.row.state === 0 ? 'success' : 'danger'" @click="changState(scope.row)" class="btn">
                  {{scope.row.state === 0 ? "正常" : "屏蔽" }}
                </el-tag>
                <el-tag @click="changProjectBtn(scope.row)" class="btn">详情</el-tag>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination @current-change="handleCurrentChange" layout="total, prev, pager, next" :page-size="5" :total="currentData.length">
          </el-pagination>

          <!-- 修改对话框 -->
          <el-dialog title="详细信息" :visible.sync="dialogVisible" width="30%">
            <el-form :model="changeDataOld" label-width="80px">
              <el-form-item label="项目编号">
                <el-input v-model="changeDataOld.id" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="项目名称">
                <el-input v-model="changeDataOld.name"></el-input>
              </el-form-item>
              <el-form-item label="项目价格">
                <el-input v-model="changeDataOld.price"></el-input>
              </el-form-item>
              <el-form-item label="项目时长">
                <el-input v-model="changeDataOld.time"></el-input>
              </el-form-item>
              <el-form-item label="是否屏蔽">
                <el-switch v-model="changeDataOld.state" active-text="屏蔽" inactive-text="正常"></el-switch>
              </el-form-item>
              <el-form-item label="创建时间">
                <el-input v-model="changeDataOld.date" :disabled="true"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="cancelChange">取 消</el-button>
              <el-button type="primary" @click="changProjectData">确 定</el-button>
            </span>
          </el-dialog>
        </el-tab-pane>
      </el-tabs>

    </div>
  </div>
</template>

<script>
import qs from 'qs'
export default {
  name: 'Store',
  data () {
    return {
      activeName: 'first',
      // activeName: 'second',
      addressHttp: 'http://localhost:8080/',
      dataObj: {},
      keyWord: '',
      tableData: [],
      dialogVisible: false,
      // 修改时，双向绑定的数据
      changeDataOld: {},
      // 修改之前的数据
      rowOldData: {},
      arrPhoto: [],
      //分页
      currentPage: 1,
      //商户id
      id: 0
    };
  },
  methods: {
    changProjectBtn (row) {
      this.changeDataOld = { ...row }
      this.rowOldData = { ...row }
      this.dialogVisible = true
      if (row.state) {
        this.changeDataOld.state = true
        this.rowOldData.state = true
      } else {
        this.changeDataOld.state = false
        this.rowOldData.state = false
      }
    },
    // 取消修改数据
    cancelChange () {
      this.changeDataOld = this.rowOldData
      this.dialogVisible = false
    },
    // 确定修改数据
    changProjectData () {
      this.changeDataOld.state ? this.changeDataOld.state = 1 : this.changeDataOld.state = 0
      this.$axios({
        url: '/pro/change',
        method: 'post',
        data: this.changeDataOld
      }).then((res) => {
        if (res.code === 200) {
          this.getProject()
        }
      })
      this.dialogVisible = false
    },
    //项目条件查询
    searchProject () {
      if (this.keyWord == '') {
        this.getProject()
      } else {
        this.$axios({
          url: '/pro/searchProject',
          method: 'post',
          data: qs.stringify({
            'name': this.keyWord
          })
        }).then((res) => {
          this.keyWord == ''
          if (res.code === 200) {
            this.tableData = res.data
          }
        })
      }

    },
    getStore () {
      this.$axios({
        url: `/shop/getShopInformation?id=${this.id}`,
        method: 'get',
      }).then((res) => {
        if (res.code === 200) {
          this.dataObj = res.data
          // this.arrPhoto = res.data.photo.split(',')
          // console.log(this.arrPhoto);
        }
      })
    },
    getProject () {
      this.$axios({
        url: '/pro/getProject',
        method: 'get',
      }).then((res) => {
        if (res.code === 200) {
          this.tableData = res.data
        }
      })
    },
    // changState
    changState (row) {
      row.state ? row.state = 0 : row.state = 1
      this.$axios({
        url: '/pro/changState',
        method: 'post',
        data: qs.stringify({ id: row.id, state: row.state })
      }).then((res) => {
        if (res.code === 200) {
          this.getProject()
        }
      })
    },
    handleCurrentChange (val) {
      this.currentPage = val
    }
  },
  mounted () {
    this.id = this.$route.query
    this.getStore();
    this.getProject()
  },
  computed: {
    currentData () {
      let start = (this.currentPage - 1) * 5;
      let end = start + 5;
      end > this.tableData.length
        ? (end = this.tableData.length)
        : (end = end);
      return this.tableData.slice(start, end);
    },
    total () {
      return this.tableData.length;
    },
  },
  watch: {},
};
</script>

<style  lang="less" scoped>
.el-row {
  margin-bottom: 15px;
  &:last-child {
    margin-bottom: 0;
  }
}
// 门店信息
.cardDiv {
  & {
    width: 100%;
    margin-bottom: 10px;
    background-color: aquamarine;
  }
  .title {
    width: 20%;
    float: left;
    color: rgb(170, 170, 170);
  }
  .content {
    width: 80%;
    float: left;
    div {
      & {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-self: flex-start;
        // border: 2px skyblue solid;
      }
      p {
        margin: 0 0 5px 0;
      }
      img {
        width: 100px;
        height: 100px;
      }
      p:nth-of-type(1) {
        width: 25%;
      }
      .introduceDiv {
        width: 75%;
        position: relative;
        .textareaP {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          cursor: pointer;
          color: rgb(170, 170, 170);
          position: absolute;
          top: 0;
        }
        .textareaP:hover {
          white-space: normal;
          overflow: visible;
          background-color: rgb(255, 255, 255);
          padding: 0 0 10px 0;
          color: black;
          border: 1px solid beige;
          border-radius: 4px;
          z-index: 100;
        }
      }
      p:nth-of-type(2) {
        width: 75%;
        position: relative;
        .imgLeft {
          margin-right: 20px;
        }
      }
    }
  }
}
// 项目服务
.project {
  .totalTitle {
    div {
      :first-child {
        color: rgb(170, 170, 170);
      }
      &::after {
        content: '';
        display: block;
        clear: both;
      }
      p {
        float: left;
        width: 15%;
        padding: 5px;
        margin: 0;
      }
    }
  }
  hr {
    // color: rgb(228, 231, 237);
    border: 1px solid rgb(228, 231, 237);
  }
  .header {
    // border: 1px salmon solid;
    // box-sizing: border-box;
    // padding: 0 2% 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // p {
    //   float: left;
    // }
    div {
      // float: right;
      width: 50%;
      .searchBtn {
        margin-left: 10px;
      }
    }
  }
  .btn {
    cursor: pointer;
    margin-left: 5px;
  }
}
</style>
